<template>
  <a-layout class="manage_layout">
    <a-layout-sider class="manage_layout_sider" v-model:collapsed="collapsed" :trigger="null"
                    :width="200" :collapsed-width="80" collapsible>
      <router-link to="/manage">
        <div class="logo"
             :style="{backgroundImage:collapsed?`url(${logoMini})`:`url(${logo})`,backgroundSize:collapsed?'45px':'320px'}"></div>
      </router-link>
      <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys" @select="selectMenu">
        <template v-for="menu in manageRouteList" :key="menu.vueMark">
          <a-sub-menu :key="menu.vueMark" v-if="menu.type===0">
            <template #title>
              <component v-bind:is="menu.icon"/>
              <span>{{ menu.name }}</span>
            </template>
            <a-menu-item v-for="child in menu.childList" :key="child.vuePath">
              <component v-if="child.icon" v-bind:is="child.icon"/>
              <span>{{ child.name }}</span>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item :key="menu.vuePath" v-if="menu.type===1">
            <component v-if="menu.icon" v-bind:is="menu.icon"/>
            <span>{{ menu.name }}</span>
          </a-menu-item>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="manage_layout_header">
        <menu-unfold-outlined v-if="collapsed" @click="collapsed = !collapsed"/>
        <menu-fold-outlined v-else @click="collapsed = !collapsed"/>
        <a-space>
          <span>
            <span>您好！</span>
            <a-tooltip placement="bottom" title="查看用户主页">
              <router-link :to="'/u/'+user.domain">
                <span style="text-decoration:underline">{{ user.name }}</span>
              </router-link>
            </a-tooltip>
          </span>
          <a-divider type="vertical"/>
          <a-tooltip placement="bottom" title="回到首页">
            <router-link to="/home">
              <home-outlined/>
            </router-link>
          </a-tooltip>
        </a-space>
      </a-layout-header>
      <a-layout-content class="manage_layout_content">
        <a-breadcrumb>
          <a-breadcrumb-item v-for="item in breadcrumbs" :key="item.path">
            <router-link :to="item.path">
              {{ item.meta.breadcrumbName }}
            </router-link>
          </a-breadcrumb-item>
        </a-breadcrumb>
        <div class="manage_layout_content_div">
          <router-view/>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { computed, defineComponent, reactive, toRefs } from 'vue'
import {
  AlertFilled,
  DashboardFilled,
  FolderOpenFilled,
  HomeOutlined,
  IdcardFilled,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import logo from '@/assets/logo.png'
import logoMini from '@/assets/logo-mini.png'
import { useStore } from 'vuex'

export default defineComponent({
  setup () {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      user: computed(() => store.getters.user),
      breadcrumbs: computed(() => route.matched),
      collapsed: false,
      selectedKeys: computed(() => [route.path]),
      manageRouteList: computed(() => store.getters.manageRouteList)
    })
    const methods = reactive({
      selectMenu: ({ key }) => {
        router.push(key)
      }
    })

    return {
      ...toRefs(state),
      ...toRefs(methods),
      logo,
      logoMini,
      AlertFilled,
      FolderOpenFilled,
      DashboardFilled,
      MenuFoldOutlined,
      MenuUnfoldOutlined,
      IdcardFilled
    }
  },
  components: {
    AlertFilled,
    FolderOpenFilled,
    DashboardFilled,
    HomeOutlined,
    IdcardFilled,
    MenuFoldOutlined,
    MenuUnfoldOutlined
  }
})
</script>

<style lang="less">
.manage_layout {
  min-width: 1600px;
  height: 100%;
  min-height: 100vh;

  & .manage_layout_sider {
    overflow: auto;

    & .logo {
      height: 45px;
      margin: 16px;
      background-repeat: no-repeat;
    }
  }

  & .manage_layout_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;

    & a {
      color: #000000;
    }
  }

  & .manage_layout_content {
    padding: 20px 40px;
    height: 100%;

    & .manage_layout_content_div {
      margin-top: 20px;
    }
  }
}

.param_item_label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.operation_row {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
